﻿@using xConnected.Common.ExpertProfile
@using xConnected.Common.Project
<div data-bind="if: $root.bookmark.positionAddedToPositionListAlert">
    <div class="alert alert-info" align="center">
        You have bookmarked Position: 
        <strong data-bind="text:  $root.bookmark.bookmarkModel().Position().Title"></strong>
        in list:
        <strong data-bind="text:  $root.bookmark.bookmarkModel().PositionList().Name"></strong>
    </div>
</div>
<div data-bind="if: $root.bookmark.positionBlockedAlert">
    <div class="alert alert-block" align="center">
        You have blocked this position/project: 
        <strong data-bind="text:  $root.bookmark.bookmarkModel().Position().Title"></strong>
    </div>
</div>
<div>
    <div data-bind="visible: $root.position.editDeleteNewButton" class="well">
        <div class="row-fluid">
            <strong style="color: #999999; font-size: 11px;">@ProjectRes.CREATENEWPROJECT</strong>
            <div class="pull-right" style="margin-top: 0px">
                <a style="margin-top: 0px" class="btn btn-small" data-bind="click: function() { $root.position.selectNew(); },tooltip: {title: 'Create new Position', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"><i class="icon-plus"></i></a>
            </div>
        </div>
    </div>
    <div class="row-fluid" align="center" style="margin-bottom: 10px"><span data-bind="text: $root.position.fromPageNumber" style="font-size: smaller"></span> <span style="font-size: smaller">-</span> <span style="font-size: smaller" data-bind="text: $root.position.toPageNumber"></span> <span style="font-size: smaller">from</span> <span data-bind="text: $root.position.count" style="font-size: smaller"></span> <span style="font-size: smaller">matches</span></div>
    <div>
        <ul class="thumbnails" data-bind="foreach: positions">
            <li class="span3">
                <div class="thumbnail breadcrumb" style="height: 350px;">
                    <div style="margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom: 5px;">
                        <div class="row-fluid" style="height: 70px;">
                            <div align="left" class="span3">
                                <img class="img-rounded" data-bind="attr: {src: $data.Photo80X80()}" alt="Profile photo">
                            </div>
                            <div class="row-fluid">
                                <div class="span9">
                                    <a href="#" data-bind="click: function() { $root.position.selectDetails($data); }"><span data-bind="text: Title" style="margin-left: 5px"></span></a>
                                    <a href="#" class="btn btn-mini pull-right" data-bind="click: function() { $root.position.setCountryId($data); }, tooltip: {title: '@Resources.Showallexpertsfromcountry: ' +  $data.Country().Description, placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"><img data-bind="attr: {src: '../../Content/img/Flags/' + $data.Country().ShortName.toLowerCase() + '.png'}" alt="Country flag"></a>
                                </div>
                                <small data-bind="html: Description" class="span9"></small>
                            </div>
                        </div>
                        <hr/>
                        <div style="height: 160px;">
                            <div class="row">
                                <strong style="font-size: smaller;" class="span4">@ProjectRes.Company:</strong>
                            </div>
                            @* <div class="row" data-bind="with: CompanyProfile">
                                <div class="span6"><button class="btn btn-mini" style="font-size: x-small" data-bind="text: Title, click: function() { $root.position.setCompanyId($data); },tooltip: {title: 'Show all Positions of ' + $data.Title() + ' company', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"></button></div>
                            </div>*@
                            <div class="row">
                                <span style="font-size: smaller; font-weight: bold" class="span4">@Resources.Industry:</span>
                            </div>
                            <div class="row">
                                <div  data-bind="with: Industry" class="span6"><button class="btn btn-mini" style="font-size: x-small" data-bind="text: Description, click: function() { $root.position.setIndustryId($data); },tooltip: {title: 'Show all Positions in ' + $data.Description + ' industry', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"></button></div>
                            </div>
                            <div class="row">
                                <strong style="font-size: smaller;" class="span4">@Resources.Categories:</strong>
                            </div>
                            <div class="row">
                                <span data-bind="foreach: Categories" class="span8">
                                    <a class="btn btn-mini" style="font-size: x-small" data-bind=" text: Description, click: function() { $root.position.setCategoryId($data); },tooltip: {title: 'Show all Positions in ' + $data.Description + ' category', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"></a>
                                </span>
                            </div>
                            <div class="row">
                                <strong style="font-size: smaller;" class="span4">@Resources.Technologies:</strong>
                            </div>
                            <div class="row">
                                <span data-bind="foreach: Technologies" class="span8">
                                    <a class="btn btn-mini" style="font-size: x-small" data-bind=" text: Name, click: function() { $root.project.setTechnologyId($data); },tooltip: {title: 'Show all Positions in ' + $data.Name + ' technology', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"></a>
                                </span>
                            </div>
                        </div>
                        <hr style="margin-bottom: 10px"/>
                        <div class="btn-toolbar" style="height: 45px;" align="center">
                            <a class="btn btn-mini" style="margin-right: 5px;" data-bind="click: function() { $root.position.selectDetails($data); },tooltip: {title: 'View details', placement: 'bottom', trigger: 'hover'}"><i class="icon-zoom-in"></i></a>
                            <a class="btn btn-mini" style="margin-right: 5px;" data-bind="visible: $root.position.editDeleteNewButton, click: function() { $root.position.selectEdit($data); },tooltip: {title: 'Edit profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}" ><i class="icon-pencil"></i></a>
                            @if (Request.IsAuthenticated)
                            {
                                <div class="btn-group" style="white-space: normal" data-bind="visible: $root.position.messageButton,tooltip: {title: 'Bookmark this Position', placement: 'top', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                                    <a class="btn btn-mini dropdown-toggle" data-toggle="dropdown" href="#" data-bind="click: function(){ $root.bookmark.selectPositionLoadPositionLists($data); }">
                                        <i class="icon-tag"></i>
                                        <span class="caret"></span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a data-toggle="modal" href="#CreatePositionListDialog">
                                                <span style="font-size: smaller; font-weight: bold; text-decoration: underline">Create new bookmark list</span>
                                            </a>
                                        </li>
                                        <li><hr style="margin-bottom: 2px; margin-top: 2px;"/></li>
                                        <li><span style="font-size: smaller; font-weight: bold;">Select bookmark list:</span></li>
                                        <li>
                                            <ul  data-bind="foreach: $root.bookmark.positionLists" class="unstyled">
                                                <li>
                                                    <a href="#" data-bind="click: function(){ $root.bookmark.addPositionToPositionList($data); }"><span data-bind="text: Name" style="font-size: smaller"></span></a>
                                                </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </div>
                                <a href="#" class="btn btn-mini" style="margin-right: 5px;" data-bind="visible: $root.position.messageButton, click: function() { $root.folder.setPositionRecipient($data); },tooltip: {title: 'Send message to this profile', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"><i class="icon-envelope"></i></a>
                                <a href="#" class="btn btn-mini" style="margin-right: 5px;" data-bind="visible: $root.position.messageButton, click: function() { $root.bookmark.blockPosition($data); },tooltip: {title: 'Block this position/project', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}">
                                    <i class="icon-ban-circle"></i>
                                </a>
                            }
                            <a style="margin-right: 5px;" class="btn btn-mini" data-toggle="modal" href="#DeleteDialog" data-bind="visible: $root.position.editDeleteNewButton, click: function() { $root.position.select($data); }, tooltip: {title: 'Delete Position', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}" ><i class="icon-trash"></i></a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <div data-bind="visible: $root.position.editDeleteNewButton" class="well">
            <div class="row-fluid">
                <strong style="color: #999999; font-size: 11px;">@ProjectRes.CREATENEWPROJECT</strong>
                <div class="pull-right" style="margin-top: 0px">
                    <a style="margin-top: 0px" class="btn btn-small" data-bind="click: function() { $root.position.selectNew(); },tooltip: {title: 'Create new Position', placement: 'bottom', trigger: 'hover', delay: { show: 500, hide: 100 }}"><i class="icon-plus"></i></a>
                </div>
            </div>
        </div>
    </div>
</div>